<template>
  <div class="basics">
    <div class="basicsBox">
      <header>
        <div class="headerBox">
          <div class="headerLeft">
            <div class="headImg">
              <img :src="userInfo.headImg" alt="">
            </div>
          </div>
          <div class="headerRight">
            <div class="userInfo">
              <div class="name">{{userInfo.name}}</div>
              <i class="type">{{userInfo.type}}</i>
              <i class="province">{{userInfo.province}}</i>
              <div class="timeCount">
                会员有效期至:
                <span>{{userInfo.timeCount}}</span>
                <a href="">
                  会员权限
                  <i class="el-icon-arrow-right"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <hr color="#f2f2f2" style="width: 90%;">
      <main>
        <div class="mainBox">
          <div class="title">
            <h4>基本资料</h4>
            <p>以下资料可用于密码找回、手机绑定等服务，请务必准确填写并牢记</p>
          </div>
          <div class="content">
            <div class="ID">
              <span class="name">账 号：</span>
              <span class="nameT">{{userInfo.ID}}</span>
              <a href="" v-text="userInfo.ID?'':'设置>'"></a>
              <p v-if="!userInfo.ID">（3-20个字符，支持字母和数字，账号设置后不能更改，请慎重。）</p>
            </div>
            <div class="phone">
              <span class="name">手 机 号：</span>
              <span class="nameT">{{userInfo.phone}}</span>
              <a href="" v-text="userInfo.phone?'去修改>':'前往绑定>'"></a>
<!--              <p>（3-20个字符，支持字母和数字，账号设置后不能更改，请慎重。）</p>-->
            </div>
            <div class="nickName">
              <span class="name">昵 称：</span>
              <span class="nameT">{{userInfo.nickName}}</span>
              <a href="" v-text="userInfo.nickName?'去修改>':'去设置>'"></a>
<!--              <p>（3-20个字符，支持字母和数字，账号设置后不能更改，请慎重。）</p>-->
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
    export default {
        name: "basics",
        props: {
          userInfo: Object,
        },
        data () {
            return {

            }
        },
        created () {
            this.getUserInfo();
        },
        mounted () {

        },
        methods: {
            // 获取用户信息
            getUserInfo() {
                const user = JSON.parse(localStorage.getItem('userInfo'));
                this.userInfo = user;
                console.log(user);
            },
        }

    }
</script>

<style scoped lang="scss">
  @import '../../../styles/common.scss';
  // header
  header{
    .headerBox{
      // border: 1px solid red;
      display: flex;
      .headerLeft{
        width: 16%;
        min-height: 100px;
        img{
          width: 70%;
          margin: 20px 0 0 20px;
          border-radius: 60px;
        }
      }
      .headerRight{
        width: 70%;
        // border: 1px solid green;
        .userInfo{
          margin-left: 10px;
          padding-top: 14px;
          .name{
            font-weight: bold;
            font-size: 1.2rem;
            padding: 4px;
          }
          i.type,
          i.province{
            display: inline-block;
            font-style: normal;
            font-size: 0.6rem;
            height: 16px;
            padding: 2px 8px;
            background-color: #ff6103;
            margin-right: 8px;
            color: #fff;
            border-radius: 10px;
          }
          i.province{
            background-color: #999;
          }
          .timeCount{
            padding: 10px 0;
            font-size: 0.8rem;
            color: #999;
            span{
              color: #666;
              font-size: 0.8rem;
            }
            a{
              color: #ff6103;
              display: inline-block;
              font-size: 0.8rem;
              padding-left: 8px;
            }
          }
        }
      }
    }
  }
  main{
    .mainBox{
      padding-left: 20px;
      padding-right: 20px;
      .title{
        h4{
          font-weight: normal;
          font-size: 1.1rem;
          margin: 6px 0;
        }
        p{
          color: #999;
          font-size: 0.6rem;
          margin-bottom: 6px;
        }
      }
      .content{
        margin-top: 20px;
        .ID,.phone,.nickName{
          border-bottom: 1px dotted #f2f2f2;
          padding: 10px 0;
          span.name{
            display: inline-block;
            min-width: 66px;
            text-align: right;
            padding-right: 10px;
            font-size: 0.8rem;
          }
          .nameT{
            display: inline-block;
            min-width: 80px;
            margin: 0 6px;
          }
          p{
            display: inline-block;
            font-size: 0.6rem;
            color: #999;
          }
          a{
            color: #2e86ff;
            font-size: 0.7rem;
          }
        }
      }
    }
  }
</style>